<template>
	<view class="zy_popup_container">
		<view @click="onClickOverlay" v-if="popVisible" class="zy_popup">
			<view @click.stop>
				<view
					:class="{zy_popup_center:mode==='center',zy_popup_top:mode==='top',zy_popup_left:mode==='left',zy_popup_right:mode==='right',zy_popup_bottom:mode==='bottom'}">
					<!-- 弹出层内容 -->
					<view class="zy_popup_content" :style="[{marginBottom:`${type=='dialog'?'120rpx':''}`}]"
						v-if="!slotContentShow">
						<!-- 关闭图标 -->
						<view :class="{zy_popup_content_iconfont:closeable===true}" v-if="closeable" @click="close">
							<i class='iconfont icon-guanbi'></i>
						</view>
						<!-- 弹出层标题 -->
						<view :class="{zy_popup_content_title:title}"
							:style="[{marginTop:`${closeable===true?'-20rpx':''}`}]">
							{{title}}
						</view>
						<!-- 弹出层插槽 -->
						<view class="zy_popup_slot">
							<scroll-view scroll-y="true"
								:style="[{maxHeight:`${mode==='left'||mode==='right'?scrollHeight:'65vh'}`}]">
								<slot></slot>
							</scroll-view>
						</view>
					</view>

					<view v-else>
						<slot></slot>
					</view>
					<!-- 对话框底部按钮 -->
					<view :class="{zy_popup_dialog_btn:type=='dialog'}" v-if="type=='dialog'">
						<view @click="cancel" class="zy_popup_dialog_btn_text">{{leftBtn}}</view>
						<view class="zy_popup_dialog_btn_border"></view>
						<view @click="confirm" style="color: #409efe;" class="zy_popup_dialog_btn_text">{{rightBtn}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//弹出方向
			mode: {
				type: String,
				default: 'center'
			},
			//点击遮罩是否关闭弹窗
			closeOnClickOverlay: {
				type: Boolean,
				default: true
			},
			// 是否显示关闭图标
			closeable: {
				type: Boolean,
				default: false
			},
			// 弹出层标题
			title: {
				type: String
			},
			// 弹出层类型,可选dialog
			type: {
				type: String,
				default: ''
			},
			// 弹出层dialog类型下,按钮名称
			leftBtn: {
				type: String,
				default: function() {
					return this.$t('public.cancel')
				}
			},
			rightBtn: {
				type: String,
				default: function() {
					return this.$t('public.confirm')
				}
			},
			slotContentShow: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				popVisible: false,
			}
		},
		computed: {
			//弹出层内容滚动自适应
			scrollHeight() {
				let height = Number(95)
				if (this.closeable === true && this.title && this.type == 'dialog') {
					height = height - Number(20)
				} else if (this.closeable === true && this.title) {
					height = height - Number(10)
				} else if (this.title && this.type == 'dialog') {
					height = height - Number(15)
				} else if (this.closeable && this.type == 'dialog') {
					height = height - Number(15)
				} else if (this.closeable === true) {
					height = height - Number(5)
				} else if (this.title) {
					height = height - Number(5)
				} else if (this.type == 'dialog') {
					height = height - Number(10)
				}
				return `${height}vh`
			}
		},
		methods: {
			//打开弹窗
			open() {
				this.popVisible = true
			},
			// 关闭弹窗
			close() {
				this.popVisible = false
				this.$emit('close')
			},
			//点击遮盖层关闭弹窗
			onClickOverlay() {
				if (this.closeOnClickOverlay == true) {
					this.popVisible = false
				}
			},
			//左边取消按钮
			cancel() {
				//关闭弹窗
				this.popVisible = false
				this.$emit('cancel')
			},
			//右边确认按钮
			confirm() {
				// this.popVisible = false
				this.$emit('confirm')
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>